<!-- 船代公司 -->
<template>
  <div class="ship-company">
    <!-- 查询 -->
    <el-row :gutter="15">
      <el-col :span="24">
        <el-form label-width="80px" :model="formData" size="mini" :inline="true" class="demo-form-inline">
          <el-form-item label="名称">
            <el-input v-model="formData.boatAgentName"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select placeholder="请选择" v-model="formData.state">
              <el-option label="冻结" value="0"></el-option>
              <el-option label="激活" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="getTableOrSearch(1, 10)">查询</el-button>
            <el-button size="mini" @click="empty">清空</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 操作 -->
    <el-row>
      <el-form size="mini" :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-button type="primary" size="mini" @click="newBoat">新增</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- 表格 -->
    <el-table
      border
      :data="tabelData"
      style="width: 100%; overflow-x: auto;">
      <el-table-column
        align="center"
        label="名称">
        <template slot-scope="scope">
          {{scope.row.boatAgentName}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="助记码（首字母拼音）">
        <template slot-scope="scope">
          {{scope.row.ZJM}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="提单号包含首字母">
        <template slot-scope="scope">
          {{scope.row.oddNum}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="155"
        label="有效期">
        <template slot-scope="scope">
          {{scope.row.effectiveDate}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="业务员">
        <template slot-scope="scope">
          {{scope.row.UserName}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="状态">
        <template slot-scope="scope">
          {{scope.row.state | salespersonStatus}}
        </template>
      </el-table-column>
      <el-table-column
        width="260"
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="editTableData(scope.row, 0)" v-if="scope.row.state==='1'">冻结</el-button>
          <el-button
            size="mini"
            type="success"
            @click="editTableData(scope.row, 1)" v-if="scope.row.state==='0'">激活</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="settingCosts(scope.$index, scope.row)">设置费用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="ship-company-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageNo"
        :page-sizes="[10, 15, 20]"
        :page-size="number"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <setting-costs-dialog :setboat="setboat" :contactInformation="contactInformation"></setting-costs-dialog>
    <new-boat-dialog></new-boat-dialog>
    <edit-boat-dialog :editship="editship"></edit-boat-dialog>
  </div>
</template>

<script>
import SettingCostsDialog from './dialog/SettingCostsDialog.vue'
import NewBoatDialog from './dialog/NewBoatDialog.vue'
import EditBoatDialog from './dialog/EditBoatDialog.vue'
import { SearchBoatAgentComData, UpdateState, CostSetList } from './api/putBoxCompany'
export default {
  components: {
    SettingCostsDialog,
    NewBoatDialog,
    EditBoatDialog
  },
  data () {
    return {
      formData: {},
      tabelData: [],
      editship: {},
      number: 10,
      pageNo: 1,
      total: 0,
      setboat: '',
      contactInformation: []
    }
  },
  async mounted () {
    this.getTableOrSearch(1, 10)
  },
  methods: {
    // 读取
    async getTableOrSearch (pg, nb) {
      const res = await SearchBoatAgentComData({
        boatAgentName: this.formData.boatAgentName,
        state: this.formData.state,
        page: pg,
        num: nb
      })
      if (res.status === 200) {
        this.tabelData = res.data
        this.total = res.count
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 获取船代公司费用
    async getCostSetList (boatId) {
      const res = await CostSetList({
        boatAgentId: boatId
      })
      if (res.status === 200) {
        this.contactInformation = res.data
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    handleCurrentChange (val) {
      this.getTableOrSearch(val, this.numb)
      this.pageNo = val
    },
    // 每页条数
    handleSizeChange (val) {
      this.getTableOrSearch(this.pageNo, val)
      this.numb = val
    },
    // 设置费用
    settingCosts (index, row) {
      // console.log(this.contactInformation.length === 0)
      this.setboat = row.boatAgentId
      this.getCostSetList(row.boatAgentId)
      this.$store.commit('show_setting_costs_dialog')
    },
    // 新增弹窗
    newBoat () {
      this.$store.commit('show_new_boat_dialog')
    },
    // 修改
    handleEdit (index, row) {
      this.editship = row
      this.$store.commit('show_edit_boat_dialog')
    },
    // 修改激活状态
    async editTableData (row, st) {
      const res = await UpdateState({
        boatAgentId: row.boatAgentId,
        state: st
      })
      if (res.status === 200) {
        if (st === 0) {
          row.state = '0'
          this.$notify({
            title: '成功',
            message: '冻结成功！',
            type: 'success'
          })
        }
        if (st === 1) {
          row.state = '1'
          this.$notify({
            title: '成功',
            message: '激活成功！',
            type: 'success'
          })
        }
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 更改状态
    // handleDelete (index, row) {
    //   // this.$refs.hangeStatus.editDataTab()// 调用子组件的方法
    //   console.log(index, row)
    // },
    // 删除
    // async delship (btid) {
    //   const res = await delBoatAgentCom({
    //     boatAgentId: btid
    //   })
    // },
    // 清空
    empty () {
      this.formData = {}
    }
  }
}
</script>

<style lang="less">
  .ship-company-pagination {
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
  }
</style>
